<oem-drawer>
  <oem-drawer-label>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="feather feather-menu"
    >
      <line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line>
    </svg>
  </oem-drawer-label>
  <oem-drawer-popup>
    <oem-drawer-popup-warp position="left"  style='--drawer-popup-bg:{{data.nav_bg}}; --font-color:{{data.menu_color}};'>
      <div class="h-screen flex flex-col" style="width:80vw">
        <div class="p-5">
          {% include 'serach/format_2', data: data %}
        </div>
        <div class="px-5 flex-1 overflow-y-auto">
          <div class="mobile_menu">
            <ul>
              {% if data.nav.id != "" %}
                {% for item in header_nav.nav_item %}
                  <li>
                    <div class="mobile_nav-item">
                      {% include "basic/nav_a", nav : item %}
                      {% if item.children %}
                        <span class="animated-plus cursor-pointer"></span>
                      {% endif %}
      
                    </div>
                    {% if item.children %}
                      <ul class="child_mobile_nav">
                        {% for el in item.children %}
                          <li>
                            <div class="mobile_nav-item">
                              {% include "basic/nav_a", nav : el %}
                              {% if el.children %}
                                <span class="animated-plus cursor-pointer"></span>
                              {% endif %}
                            </div>
                            <ul class="child_mobile_nav">
                              {% for ddItem in el.children %}
                                <li style="padding:10px 16px">
                                  {% include "basic/nav_a", nav : ddItem %}
                                </li>
                              {% endfor %}
                            </ul>
                          </li>
                        {% endfor %}
                      </ul>
                    {% endif %}
                  </li>
                {% endfor %}
              {% else %}
                <li>
                  <div class="mobile_nav-item">
                    <a href="/">Home</a>
                  </div>
                </li>
                <li class="mobile_nav-item">
                  <a href="/collections">Collections</a>
                </li>
                <li class="mobile_nav-item">
                  <a href="/search">Search</a>
                </li>
                <li class="mobile_nav-item">
                  <a href="/collections/all">Product</a>
                </li>
              {% endif %}
            </ul>
          </div>
        </div>

        <div class="p-5 flex justify-between items-center">
          <a href="/account/login" class=" text-inherit ">
            <svg
              aria-hidden="true"
              role="img"
              focusable="false"
              xmlns="http://www.w3.org/2000/svg"
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle>
            </svg>
          </a>
          <select class="mobile_currency-select bg-zinc-200">
            {% get_currencies limit=100 %}
            {% for list in currencies %}
            <option value="{{ list.standard_code }}">
              {{ list.standard_code }} : {{ list.symbol_left }}{{ list.symbol_right }}
            </option>
            {% endfor %}
          </select>
        </div>

      </div>
    </oem-drawer-popup-warp>
    <oem-drawer-close class="oem-drawer-popup-mask"></oem-drawer-close>
  </oem-drawer-popup>
</oem-drawer>
